<template>
  <div class="exceldata vH flex-column">
    <el-row class="main">
      <el-table
        ref="table"
        v-loading="page.loading"
        border
        :data="tableData"
        stripe
        row-key="AUTOID"
        height="100%"
      >
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="errormsg" width="250" label="错误信息">
          <template slot-scope="scope">
            <el-tag v-if="!scope.row.errormsg" type="warning">
              <i class="el-icon-loading"></i>
            </el-tag>
            <template v-else>
              <el-tag
                v-for="(item, index) in scope.row.errormsg.split(';')"
                :key="index"
                type="warning"
                >{{ item }}
              </el-tag>
            </template>
          </template>
        </el-table-column>
        <template v-for="item in assetA1Cols">
          <el-table-column
            :key="item.AUTOID"
            :prop="item.DataField"
            :width="item.Width"
            :label="item.HeaderText"
          ></el-table-column>
        </template>
      </el-table>
    </el-row>
    <el-row class="foot tree_top_border">
      <mei-pagination
        :pageTotal="this.excelData.length"
        v-model="page.paginations"
      >
      </mei-pagination>
    </el-row>
  </div>
</template>

<script>
import { AssetA1 } from "@/api";
export default {
  data() {
    return {
      //页面控制
      page: {
        loading: false,
        paginations: {}
      },
      //数据
      data: {
        //系统列
        sysAssetA1Data: []
      }
    };
  },
  inject: ["A1List"],
  //外部属性
  props: {
    //选择的列
    excelCol: {
      type: Object,
      default() {
        return {};
      }
    },
    //数据
    excelData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  //内部方法
  methods: {
    initPage() {
      this.data.sysAssetA1Data = [...this.A1List.data.sysAssetA1Data];
      this.excelData.forEach(item => {
        item.errormsg = "";
      });
    },
    //得到数据 将[{中文:值},{中文:值}] => [{sysAssetA1_160:值}]
    getExcelData() {
      const _data = this.excelData.map(item => {
        //{中文:值}
        let row = {};
        Object.keys(item).forEach(key => {
          let a1 = this.assetA1Cols.find(a1 => {
            return a1.DataField == key;
          });
          if (a1 && a1.SYS_ASSET_A1_160) {
            let newkey = a1.SYS_ASSET_A1_160;
            if (
              a1.SYS_ASSET_A1_60 &&
              a1.SYS_ASSET_A1_70 &&
              a1.SYS_ASSET_A1_80
            ) {
              newkey = "str" + newkey;
            }
            Object.assign(row, {
              [newkey]: item[key]
            });
          }
        });
        return row;
      });
      return _data;
    },
    async checkData() {
      //数据
      const excel = this.getExcelData();
      const idfield = this.data.sysAssetA1Data.find(
        a1 => a1.SYS_ASSET_A1_160 == "ASSET_A1_30"
      ).SYS_ASSET_A1_50;
      const res = await AssetA1.CheckData(excel);
      // res.forEach(element => {
      for (let i = 0; i < res.length; i++) {
        const element = res[i];
        const index = this.excelData.findIndex(
          data => data[idfield] == element.id
        );
        let row = this.excelData[index];
        row.errormsg = element.msg;
        this.$set(this.excelData, index, row);
      }
      // );
    }
  },
  //组件
  components: {},
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {
    //分页后的数据
    tableData() {
      let _data = [];
      const { index = 1, size = 10 } = this.page.paginations;
      _data = this.excelData.slice((index - 1) * size, size * index);
      return _data;
    },
    //计算显示的列
    assetA1Cols() {
      let _data = [];
      this.data.sysAssetA1Data.forEach(item => {
        //添加属性
        let _item = Object.assign(
          { ...item },
          {
            HeaderText: item.SYS_ASSET_A1_50, //标题
            DataField: item.SYS_ASSET_A1_160, //字段名
            Width: item.SYS_ASSET_A1_20 //宽度
          }
        );
        if (this.excelCol) {
          if (
            Object.keys(this.excelCol).includes(item.HeaderText) &&
            this.excelCol[item.HeaderText]
          ) {
            _item.DataField = this.excelCol[item.HeaderText];
            _data.push(_item);
          }
        }
      });
      return _data;
    }
  },
  //监视
  watch: {
    //对照列改变时 刷新布局
    excelCol(val) {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },

    //列改变时 获得数据 提交后台验证
    assetA1Cols(val) {
      if (val.length != 0) {
        this.checkData();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
</style>
